import React, { memo, useEffect } from "react";
import { shallowEqual, useDispatch, useSelector } from "react-redux";

// react-activation
import KeepAlive from "react-activation";

// redux
import { getHomeDataAction } from "./store/actionCreators";

import HomeTitle from "./home-title";
import { HomeWrapper } from "./style";
import LayoutCard from "../../components/layout-card";

export default memo(function Home() {
  const { homeData } = useSelector(
    (state) => ({
      homeData: state.getIn(["home", "homeData"]),
      /*       userInfo: state.getIn(["user", "userInfo"]), */
    }),
    shallowEqual
  );
  const dispatch = useDispatch();
  useEffect(() => {
    dispatch(getHomeDataAction());
  }, [dispatch]);
  return (
    /*   <KeepAlive> */
    <HomeWrapper>
      <HomeTitle />
      <LayoutCard data={homeData} />
    </HomeWrapper>
    /*  </KeepAlive> */
  );
});
